<template>
  <div class="pay">
    <div class="payCon">
      <ul>
        <li><i>订单内容：</i><span v-html="form.roomTitle"></span></li>
        <li><i>入住信息：</i><span v-html="form.userName"></span></li>
        <li><i>交易金额：</i><span v-html="form.money">{{form.money}}元</span></li>
        <li><i>购买时间：</i><span v-html="payTime">{{payTime}}</span></li>
        <li><i>订单号：</i><span v-html="payNum"></span></li>
      </ul>
    </div>
    <div class="payconfirm">
      <div class="payprice">
        <span>支付金额：</span>
        <b>￥</b>
        <i v-html="form.money">{{form.money}}</i>
      </div>
      <div class="payconfirmCon">
        <span>支付方式</span>
        <span style="font-size: 20px">{{tip}}</span>
        <div class="paychange">
          <b @click="change('ZFB')" :class="{activeborder:ZFB==typeActive}"><i :class="{active:ZFB==typeActive}"></i></b>
          <b @click="change('WX')" :class="{activeborder:WX==typeActive}"><i :class="{active:WX==typeActive}"></i></b>
          <div class="erweima" :class="{activeimg:ZFB==typeActive}">
            <img src="../../assets/img/reservation/zfb.jpg" alt="">
            <el-row>
              <el-button type="danger">扫描上方支付宝二维码支付</el-button>
            </el-row>
          </div>
          <div class="erweima" :class="{activeimg:WX==typeActive}">
            <img src="../../assets/img/reservation/wx.png" alt="">
            <el-row>
              <el-button type="danger">扫描上方微信二维码支付</el-button>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { order } from '../../api/pay'
export default {
  data () {
    return {
      typeActive: 'WX',
      WX: 'WX',
      ZFB: 'ZFB',
      form: {
        roomTitle: '',
        money: '',
        userName: ''
      },
      payTime: '',
      payNum: '',
      tip: '',
      payData: {}
    }
  },
  created () {
    if (this.$route.query.res) {
      const data = JSON.parse(this.$route.query.res)
      this.form.roomTitle = '&nbsp;&nbsp;' + data.roomTitle
      this.form.money = '&nbsp;&nbsp;' + data.money
      this.payNum = '&nbsp;&nbsp;' + data.payId
      this.form.userName = '&nbsp;&nbsp;' + data.userName
    } else {
      this.payData = JSON.parse(sessionStorage.getItem('payData'))
      if (this.payData) {
        const arr = []
        const obj = {}
        this.payData.forEach(item => {
          for (const key in item) {
            const value = item[key]
            let i = value
            let le = 0
            while (i >= 1) {
              i = i / 10
              le++
            }
            if (value % 1 !== 0 || le === 13) {
              var cvalue = '&nbsp;&nbsp;' + value + '&nbsp;&nbsp;'
            } else {
              cvalue = value
            }
            key in obj ? (obj[key] += cvalue) : (obj[key] = cvalue)
          }
        })
        for (const i in obj) {
          const o = {}
          o[i] = obj[i]
          arr.push(o)
        }
        this.form.roomTitle = arr[20].roomName
        this.form.money = '&nbsp;&nbsp;' + arr[13].payMoney
        this.payNum = arr[22].payId
        this.form.userName = arr[2].name
        // this.tip = '支付中'
      } else {
        this.tip = '数据错误，请重新预订'
      }
    }

    // 支付成功之后上传订单信息到服务器
    // order(data).then(res => alert('支付成功')).catch(err => console.log(err))

    // 订单创建时间
    const date = new Date()
    let month = date.getMonth() + 1
    let strDate = date.getDate()
    if (month >= 1 && month <= 9) {
      month = '0' + month
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = '0' + strDate
    }
    this.payTime = '&nbsp;&nbsp;' + date.getFullYear() + '年' + month + '月' + strDate + '日' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()

    // 清除 sessionStorage 缓存
    // sessionStorage.removeItem('payData')
  },
  methods: {
    change (paymethod) {
      this.typeActive = paymethod
    }
  }
}
</script>

<style lang="scss">
.active{
  background: url('http://passingcloud.cn/bxys/resource/img/icon-check.png');
}
  .pay{
    width: 1200px;
    margin: 0 auto;
    margin-top: 200px;
    margin-bottom: 60px;
    background: #fff;
    .payCon{
      width: 1120px;
      height: 150px;
      padding: 40px;
      border-bottom: 30px solid #f4f4f4;
      ul{
        li{
          height: 33px;
          color: #0f0f0f;
          font-size: 14px;
          i{
            width: 85px;
            display: inline-block;
          }
          span{
          color: #888888;
          }
        }
      }
    }
    .payconfirm{
      padding: 40px;
      .payprice{
        position: relative;
        span{
          color: #888888;
          font-size: 18px;
        }
        b{
          color: #fd6674;
          font-size: 18px;
          padding-left: 5px;
        }
        i{
          color: #fd6674;
          font-size: 36px;
          position: absolute;
          top: -15px;
          left: 100px;
        }
      }
      .payconfirmCon{
          margin-top: 30px;
        span{
          color: #888888;
          font-size: 14px;
          margin-right: 400px;
        }
        .paychange{
          height: 400px;
          margin-top: 20px;
          b{
            width: 145px;
            height: 50px;
            display: inline-block;
            border: 1px solid #e8e8e8;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
            position: relative;
            i{
              width: 28px;
              height: 25px;
              position: absolute;
              right: -3px;
              display: inline-block;
            }
            &:nth-child(1){
              background: url('http://passingcloud.cn/bxys/resource/img/ali_pay.png');
            }
            &:nth-child(2){
              background: url('http://passingcloud.cn/bxys/resource/img/wx_pay.png');
            }
          }
          .activeborder{
              border: 1px solid #fd6674;
            }
          .erweima{
            width: 300px;
            height: 300px;
            display: none;
            img{
              width: 100%;
              height: 100%;
            }
            .el-button{
              width: 340px;
              height: 50px;
              span{
              color: #fff;
              }
            }
          }
          .activeimg{
            display: block;
          }
        }
      }
    }
  }
</style>
